/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		<!-- 选择城市 -->
		<city-select
			v-if="openCityList === true"
			@cityClick="cityClick"
			:formatName="formatName"
			:activeCity="activeCity"
			:hotCity="hotCity"
			:obtainCitys="obtainCitys"
			ref="citys"
		></city-select>
		
		
		<view v-else>
			
			<!-- input搜索框 -->
			<view class="search">
				<view class="city" @click="openCity">
					<text v-if="nowcity !='' ">{{nowcity}}</text>
					<text v-else>{{city}}</text>
					<image src="../../../static/xiangxia.png" mode="aspectFit"></image>
				</view>
				<view class="search-btn">
					<input v-model.trim="keyword" type="text" placeholder="请输入搜索内容" />
					<image class="search-image" src="../../../static/search.png" mode="aspectFit" @click="searchBtn"></image>
				</view>
			</view>
			
			
			<!-- 轮播图 -->
			<view class="swiper">
				<swiper :indicator-dots="true"
				:autoplay="true"
				:interval="2000"
				:duration="1000"
				circular="true">
					<swiper-item v-for="item in swipers" :key="item.id">
						<view class="swiper-item">
							<image :src="item.thumb" mode="aspectFit"></image>
						</view>
					</swiper-item>

				</swiper>
			</view>
			
			
			<!-- 图标 -->
			<view class="icons">
				<view @click="postDataList(item.id)" class="icons-list" v-for="item in classifys" :key="item.id">
					<image :src="item.css" mode="aspectFit"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
			
			
			<!-- 筛选区域 -->
			<!-- <ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @onSelected='onSelected' @dateChange='dateChange'></ren-dropdown-filter> -->
						
			
			
			
			<!-- 培训机构列表 -->
			<view class="jigou-list">
				<view class="jigou-list-item" v-for="item in educationList" :key="item.id" @click="pxb_detail(item.id)">
					<image class="item-left" :src="item.main_thumb" mode="aspectFit"></image>
					<view class="item-right">
						<view class="item-right-top">
							<text>{{item.name}}</text>
							<text>{{item.distance_text}}</text>
						</view>
						<text>{{item.classify}}</text>
						<view class="item-right-bottom">
							<image src="../../../static/dizhi-icon1.png" mode="aspectFit"></image>
							<text>{{item.address}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载 -->
			<uni-load-more style="margin-bottom:25upx;" :status="loading_status" showIcon iconType></uni-load-more>
		</view>
		
	</view>
</template>

<script>
	import QQMapWX from './qqmap-wx-jssdk.min.js'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import citySelect from "../components/city-select/city-select.vue"
	import citys from './citys.js'
	import RenDropdownFilter from '../components/ren-dropdown-filter/ren-dropdown-filter.vue'
	// #ifdef H5
	//var jweixin = require('jweixin-module') 
	// #endif
	import {getTrainingInfo, postDataList} from '@/request/training.js'
	var yaoshi
	export default {
		components: {uniLoadMore, citySelect, RenDropdownFilter},
		data() {
			return {
				HOST_URL:uni.HOST_URL,
				openCityList: false,
				formatName: 'title',
				activeCity: {}, //当前城市
				hotCity: [], //热门城市
				obtainCitys: [], //显示的城市数据
				loading: false,
				city: '',
				nowcity: '',
				swipers: [],
				classifys: [],
				educationList: [],
				lat:'',
				lng:'',
				citycode:'',
				page:0,
				loading_status:'more',
				// contentText:{contentdown: "上拉加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"},
				flid:0,
				filterData:[
					[{ text: '全部状态', value: '' }, { text: '状态1', value: 1 }, { text: '状态2', value: 2 }, { text: '状态3', value: 3 }, { text: '状态1', value: 1 }, { text: '状态2', value: 2 }, { text: '状态3', value: 3 }],
				[{ text: '全部类型', value: '' }, { text: '类型1', value: 1 }, { text: '类型2', value: 2 }, { text: '类型3', value: 3 }],
				],
				defaultIndex:[0,0],
				localcitydata: 1,
				keyword: '',
			}
		},
		onReachBottom(){
			this.loading_status= 'loading'
			setTimeout(() => {
				this.get_pxblist(this.lat,this.lng,this.citycode,this.page,this.flid)
				this.loading_status= 'more'
			}, 1000)
			this.page++
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad() {
			getTrainingInfo().then(res => {
				console.log(res)
				this.swipers = res.data.data.ads
				this.classifys = res.data.data.classify
			})
			this.getmyLocation()
		},
		methods: {
			searchBtn(){
				const keyword = this.keyword
				if(keyword == '') {
					uni.showToast({
						title: '搜索内容不能为空',
						icon: 'none'
					});
					return false
				}
				this.educationList= []
				this.localcitydata = 0
				this.page = 0
				this.get_pxblist(this.lat,this.lng,this.citycode,this.page,this.flid)
			},
			getmyLocation(){
				let base_set = uni.getStorageSync('base_set')
				let mapkey = base_set.txmapkey
				// 初始化位置方法
				 yaoshi = new QQMapWX({
					key: mapkey
				})
				// #ifndef H5
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: res => {
						this.lat=res.latitude
						this.lng=res.longitude
						yaoshi.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (res) => {
								console.log(res)
								this.citycode=res.result.ad_info.city_code
								this.city = res.result.address_component.city
								this.get_pxblist(this.lat,this.lng,this.citycode,this.page,this.flid)
							}
						})
					}
				})
				// #endif
				// #ifdef H5
				var that=this
				if (this.$jwx && this.$jwx.isWechat()) {
					this.$jwx.getlocation(function (res) {
						console.log(res)
						that.lat=res.latitude
						that.lng=res.longitude
						const BASE_URL = uni.BASE_URL
						uni.request({
							url: BASE_URL+'index/user/get_location',
							data: {
								lat:res.latitude,
								lng:res.longitude,
							},
							method:'POST',
							success:(res) =>{
								console.log(res.data);
								that.citycode=res.data.data.ad_info.city_code
								that.city = res.data.data.address_component.city
								that.get_pxblist(that.lat,that.lng,that.citycode,that.page,that.flid)
							},
							fail:(res)=> {
								console.log(res.data);
							}
						});
						
					});
				}else{
					uni.getLocation({
					    type: 'wgs84',
					    success: function (res) {
					        console.log('当前位置的经度：' + res.longitude);
					        console.log('当前位置的纬度：' + res.latitude);
							that.lat=res.latitude
							that.lng=res.longitude
							const BASE_URL = uni.BASE_URL
							uni.request({
								url: BASE_URL+'index/user/get_location',
								data: {
									lat:res.latitude,
									lng:res.longitude,
								},
								method:'POST',
								success:(res) =>{
									console.log(res.data,9999);
									that.citycode=res.data.data.ad_info.city_code
									that.city = res.data.data.address_component.city
									that.get_pxblist(that.lat,that.lng,that.citycode,that.page,that.flid)
								},
								fail:(res)=> {
									console.log(res.data);
								}
							});
					    }
					});
				}
				// #endif
			},
			get_pxblist(lat,lng,citycode,page,flid){
				let base_set = uni.getStorageSync('base_set')
				
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/pxb/get_pxblist',
					data: {
						lat:lat,
						lng:lng,
						citycode:citycode,
						page:page,
						flid:flid,
						localcitydata:this.localcitydata,
						keyword:this.keyword
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data);
						if(res.data.data!=''){
							this.educationList.push.apply(this.educationList,res.data.data)
						}else{
							this.loading_status= 'nomore'
							
							// if(base_set.jigou.is_citylocation==1){
							// 	uni.showModal({
							// 	    title: '当前城市暂无更多入驻机构',
							// 	    content: '需要为您查找其他城市机构吗?',
							// 	    success: (res) =>{
							// 	        if (res.confirm) {
							// 				this.localcitydata = 0
							// 	            setTimeout(()=>{
							// 	            	this.get_jglist(this.lat,this.lng,this.citycode,this.page,this.flid)
							// 	            },2000)
							// 	        } else if (res.cancel) {
							// 	            console.log('用户点击取消');
							// 	        }
							// 	    }
							// 	});
								
							// }else{
							// 	uni.showToast({
							// 		title:'暂无机构列表',
							// 		icon:'none'
							// 	})
							// }
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			pxb_detail(id){
				uni.navigateTo({
					url:'../organization/organization?id='+id
				})
			},
			// 获取单个分类信息
			postDataList(id) {
				this.flid=id
				this.educationList=[]
				this.get_pxblist(this.lat,this.lng,this.citycode,this.page,id)
			},
			cityClick(item) {
				this.nowcity = item.cityName
				console.log(item.cityCode)
				// this.citycode = item.cityCode
				this.openCityList = false
				this.educationList= []
				this.localcitydata = 0
				this.page = 0
				this.get_pxblist(this.lat,this.lng,item.cityCode,this.page,this.flid)
			},
			openCity() {
				let base_set = uni.getStorageSync('base_set')
				if(base_set.jigou.is_citylocation==1){
					this.openCityList = true
					this.formatName = 'cityName'
					//修改当前城市
					this.activeCity = {cityName: this.city,cityCode: this.citycode}
					//修改热门城市
					this.hotCity = [{cityName: '北京市',cityCode: 110100},{cityName: '上海市',cityCode: 310100},{cityName: '广州市',cityCode: 440100},]
					//修改构建索引数据
					this.obtainCitys = citys
				}else{
					uni.showToast({
						title:'根据城市名搜索机构已被管理员关闭',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.container {
	background-color: #f6f6f6;
}

// // 培训机构
// .pxjg {
// 	height: 100upx;
// 	padding: 0 20upx;
// 	background-color: #4b89ff;
// 	text-align: center;
// 	line-height: 100upx;
// 	text {
// 		font-size: 32upx;
// 		color: #fff;
// 	}
// }

// search搜索框
.search {
	height: 98upx;
	padding: 4upx 20upx;
	box-sizing: border-box;
	background-color: #4b89ff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	.city {
		display: flex;
		text {
			font-size: 28upx;
			font-weight: 400;
			color: #fff;
			margin-top: 8upx;
		}
		image {
			width: 24upx;
			height: 14upx;
			margin-top: 22upx;
			margin-left: 10upx;
		}
	}
	&-btn {
		width: 540upx;
		height: 63upx;
		border-radius: 63upx;
		background-color: #fff;
		line-height: 63upx;
		padding:0 25upx;
	
		color: #333;
		font-size: 23upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		input{
			width: 400upx;
		}
	}
	.search-image {
		width: 30upx;
		height: 30upx;
	}
}




// 轮播图
.swiper {
	height: 262upx;
	background-color: #4b89ff;
	border-bottom: 96upx solid #f6f6f6;
	box-sizing: border-box;
	swiper {
		width: 709upx;
		height: 262upx;
		margin: 0 auto;
		border-radius: 20upx;
		overflow: hidden;
		swiper-item {
			view {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}


// 图标
.icons {
	padding-top: 30upx;
	display: flex;
	flex-wrap: wrap;
	&-list {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30upx;
		image {
			width: 90upx;
			height: 90upx;
		}
		text {
			font-size: 24upx;
		}
	}
}


// 培训机构列表
.jigou-list {
	padding: 0 20upx;
	&-item {
		height: 215upx;
		background-color: #fff;
		border-radius: 8upx;
		margin-bottom: 20upx;
		display: flex;
		align-items: center;
		.item-left {
			width: 264upx;
			height: 148upx;
			border-radius: 20upx;
		}
		.item-right {
			width: 385upx;
			margin-left: 40upx;
			&-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				text:nth-child(1) {
					font-size: 30upx;
					font-weight: 700;
					color: #191919;
				}
				text:nth-child(2) {
					font-size: 20upx;
					color: #adadad;
				}
			}
			text {
				font-size: 23upx;
				color: #7e7e7e;
			}
			&-bottom {
				display: flex;
				align-items: center;
				margin-top: 10upx;
				image {
					width: 15upx;
					height: 29upx;
				}
				text {
					font-size: 22upx;
					color: #a1bfff;
					margin-left: 15upx;
				}
			}
		}
	}
}
</style>
